<template>
	<view>
		<view class="topcontent">
			<view class="money">{{user.money}}</view>
			<view class="sm">帐户余额</view>
			<view class="cu-btn round xg" @tap="$wanlshop.to('/pages/user2/money/withdraw')">立即提现</view>
		</view>
		<view class="content">
			<!-- <view class="content1">
				<view class="navbar">
					<view class="title">
						本月统计
					</view>
				</view>
				<view class="conten">				
					<view class="item">
						<view class="tit">下线订单</view>
						<view class="ss">111</view>				
					</view>			
					<view class="item">
						<view class="tit">核销订单</view>
						<view class="ss">111</view>				
					</view>
					<view class="item">
						<view class="tit">预估收入</view>
						<view class="ss">111</view>				
					</view>
					<view class="item">
						<view class="tit">收入</view>
						<view class="ss">111</view>				
					</view>
			    </view>
				<view style="clear: both;"></view>	
			</view> -->
		  <view class="wanl-order-list">
			   <view class="navbar" style="width: 100%;background-color: wheat">
					<view class="nav-item text-df" v-for="(item, index) in navList" :key="item.state" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
						{{ item.text }}
					</view>
				</view>
				<swiper :current="tabCurrentIndex" duration="300" style="height: 200rpx;">
					<swiper-item class="tab-content" v-for="(item,key) in dataList" >
						<scroll-view class="list-scroll-content content1" scroll-y>						
								<view class="conten">
									<view class="item">
										<view class="tit">下线订单</view>
										<view class="ss">{{item.total?item.total:0}}</view>				
									</view>			
									<view class="item">
										<view class="tit">核销订单</view>
										<view class="ss">{{item.finish?item.finish:0}}</view>				
									</view>
									<view class="item">
										<view class="tit">预估收入</view>
										<view class="ss">{{item.yincome?item.yincome:0}}</view>				
									</view>
									<view class="item">
										<view class="tit">收入</view>
										<view class="ss">{{item.income?item.income:0}}</view>				
									</view>
								</view>
							
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
			<qiun-title-bar title="近七天-每天订单及收益图"/>
			<view class="charts-box">
			  <qiun-data-charts type="mix" :opts="{yAxis:{data:[{position: 'left',title: '订单数'}]}}" :chartData="data7"/>
			</view>
			<view class="charts-box">
			  <qiun-data-charts type="mix" :opts="{yAxis:{data:[{position: 'left',title: '收益'}]}}"   :chartData="data71"/>
			</view>
		</view>
			
	</view>
</template>

<script>	
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				tabCurrentIndex: 0,
				navList: [
					{				
						state: 0,
						text: '今天',
						loadingType: 'more',
						current_page: 1,
						orderList: []
					},	
					{					
						state: 1,
						text: '昨天',
						loadingType: 'more',
						current_page: 1,
						orderList: []
					},
					{					
						state: 2,
						text: '本周',
						loadingType: 'more',
						current_page: 1,
						orderList: []
					},					
					{					
						state: 3,
						text: '上周',
						loadingType: 'more',
						current_page: 1,
						orderList: []
					},
					{					
						state: 4,
						text: '本月',
						loadingType: 'more',
						current_page: 1,
						orderList: []
					},					
					{					
						state: 5,
						text: '上月',
						loadingType: 'more',
						current_page: 1,
						orderList: []
					}
				],
				dataList:{},
				data7: {},
				data71: {}
				
			};
		},
		computed: {
			...mapState(['user'])		
		},
		onLoad() {
			this.loadDate();
		},
		methods: {
			async loadDate() {
				await uni.request({
					url: '/wanlshop/ddporder/getIncome',
					data: {},
					method:'POST',
					success: res => {
						this.dataList = res.data;
						console.log(this.dataList);
					}
				});
				uni.request({
					url: '/wanlshop/ddporder/getTj7',
					data: {},
					method:'POST',
					success: res => {
						this.data7 = res.data.data7;
						this.data71 = res.data.data71;
					}
				});
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			
			
			
		}
	}
</script>

<style>
	.topcontent{
		height: 260rpx;
		width: 100%;
		background-color: #FD562F;
		color:white;
		text-align:center;
	}
	.topcontent .money{
		font-size:34rpx;
		font-weight: 600;
		text-align: center;
		padding: 30rpx 0;
	}
	.topcontent .sm{
		margin-top: -20rpx;
		font-size:26rpx;		
	}
	.topcontent .xg{
		margin-top: 20rpx;
		color:#FD4C2D;
		background-color: white;		
	}
	.content1{
		width: 100%;
		height: 200rpx;
		background-color: #ffffff;
	}
	.content1 .title{		
		padding: 20rpx;
		text-align: center;
		font-weight: 600;
	}
	.conten{
		height: 100%;
		padding-top: 10px;
	}
	.content1 .conten .item{
		width: 25%;
		float: left;
		text-align: center;
		padding: 0 20rpx;	
		height: 100%;
	}
	.content1 .conten .item .tit{
		height: 60rpx;
	}
	.content1 .conten .item .ss{
		color:#FD4C2D;
		font-weight: 600;
		height: 100rpx;
	}

</style>
